<template>
  <div class="login-container">
    <div class="login-content">
      <!-- 左侧信息区 -->
      <div class="login-left">
        <div class="welcome-text">
          <h1>欢迎使用</h1>
          <h2>阿尔茨海默症诊断系统</h2>
          <p>专业的医疗诊断平台，为您提供可靠的医疗服务</p>
        </div>
        <div class="features">
          <div class="feature-item">
            <el-icon :size="24"><Upload /></el-icon>
            <span>影像上传</span>
          </div>
          <div class="feature-item">
            <el-icon :size="24"><DataAnalysis /></el-icon>
            <span>智能分析</span>
          </div>
          <div class="feature-item">
            <el-icon :size="24"><Document /></el-icon>
            <span>诊断报告</span>
          </div>
        </div>
      </div>

      <!-- 右侧登录表单 -->
      <div class="login-right">
        <div class="login-box">
          <h2>账号登录</h2>
          <p class="login-desc">欢迎回来！请输入您的账号信息</p>

          <el-form
              :model="data.form"
              ref="formRef"
              :rules="data.rules"
              class="login-form"
          >
            <el-form-item prop="username">
              <el-input
                  v-model="data.form.username"
                  :prefix-icon="User"
                  placeholder="请输入账号"
                  size="large"
              />
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                  v-model="data.form.password"
                  :prefix-icon="Lock"
                  type="password"
                  placeholder="请输入密码"
                  show-password
                  size="large"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                  type="primary"
                  class="login-button"
                  size="large"
                  @click="login"
              >
                登 录
              </el-button>
            </el-form-item>
          </el-form>

          <div class="register-link">
            还没有账号？
            <router-link to="/register" class="link">立即注册</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue"
import { Lock, User, DataAnalysis, Share, PieChart } from "@element-plus/icons-vue"
import request from "@/utils/request"
import { ElMessage } from "element-plus"
import router from "@/router"

const data = reactive({
  form: {
    username: "",
    password: ""
  },
  rules: {
    username: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }]
  }
})

const formRef = ref()

const login = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      request.post("/login", data.form).then((res) => {
        if (res.code === "200") {
          ElMessage.success("登录成功")
          router.push("/")
          localStorage.setItem("system-user", JSON.stringify(res.data.user.user))
          localStorage.setItem("token", res.data.token)
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.login-content {
  display: flex;
  width: 1000px;
  height: 600px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}

.login-left {
  flex: 1;
  background: linear-gradient(135deg, #1450aa 0%, #4b91e0 100%);
  color: white;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.welcome-text h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.welcome-text h2 {
  font-size: 24px;
  margin-bottom: 20px;
  opacity: 0.9;
}

.welcome-text p {
  font-size: 16px;
  opacity: 0.8;
  line-height: 1.6;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: transform 0.3s;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.login-right {
  flex: 1;
  padding: 60px 40px;
  display: flex;
  align-items: center;
}

.login-box {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.login-box h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.login-desc {
  color: #666;
  margin-bottom: 30px;
}

.login-form :deep(.el-input__wrapper) {
  background-color: #f5f7fa;
  border: none;
  box-shadow: none;
}

.login-button {
  width: 100%;
  height: 50px;
  background: linear-gradient(90deg, #1450aa, #4b91e0);
  border: none;
  font-size: 16px;
  font-weight: 500;
}

.login-button:hover {
  background: linear-gradient(90deg, #4b91e0, #1450aa);
}

.register-link {
  text-align: center;
  margin-top: 20px;
  color: #666;
}

.link {
  color: #1450aa;
  text-decoration: none;
  font-weight: 500;
}

@media (max-width: 768px) {
  .login-content {
    flex-direction: column;
    height: auto;
    width: 100%;
  }

  .login-left {
    padding: 40px 20px;
  }

  .login-right {
    padding: 40px 20px;
  }

  .features {
    grid-template-columns: 1fr;
  }
}
</style>
